<template>
  <div class="container mx-auto px-4 py-8">
    <!-- 标题区域 -->
    <div class="flex flex-col mb-8">
      <h2 class="text-3xl font-bold text-gray-900 mb-4">{{ categoryName }}</h2>
      <div class="h-1 w-24 bg-primary"></div>
    </div>

    <!-- 文章列表 -->
    <div class="grid gap-8 grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
      <div
        v-for="article in articleList"
        :key="article.id"
        class="group cursor-pointer"
        @click="handleArticleClick(article)"
      >
        <div class="relative overflow-hidden rounded-lg mb-4">
          <!-- <img
            class="w-full h-64 object-cover transition-transform duration-300 group-hover:scale-105"
            :src="article.thumbnail"
            :alt="article.title"
          /> -->
          <LazyImage
            :src="article.thumbnail"
            :alt="article.title"
            image-class="w-full h-64 object-cover transition-transform duration-300 group-hover:scale-105"
            skeleton-class="w-full h-64 rounded-lg"
          />
        </div>
        <h3
          class="text-xl font-bold mb-2 group-hover:text-primary transition-colors"
        >
          {{ article.title }}
        </h3>
        <p class="text-gray-600 line-clamp-2">{{ article.summary }}</p>
        <div class="mt-4 flex items-center text-sm text-gray-500">
          <span>{{ article.categoryName }}</span>
          <span class="mx-2">·</span>
          <span>{{ formatDate(article.createTime) }}</span>
        </div>
      </div>
    </div>
    <!-- 分页区域 -->
    <div class="mt-12 flex justify-center">
      <Pagination
        v-model:page="currentPage"
        v-slot="{ page }"
        :total="total"
        :itemsPerPage="10"
        :sibling-count="pageSize"
        show-edges
        @update:page="handlePageChange"
      >
        <PaginationList v-slot="{ items }" class="flex items-center gap-1">
          <PaginationFirst />
          <PaginationPrev />

          <template v-for="(item, index) in items">
            <PaginationListItem
              v-if="item.type === 'page'"
              :key="index"
              :value="item.value"
              as-child
            >
              <Button
                class="w-10 h-10 p-0"
                :variant="item.value === page ? 'default' : 'outline'"
              >
                {{ item.value }}
              </Button>
            </PaginationListItem>
            <PaginationEllipsis v-else :key="item.type" :index="index" />
          </template>

          <PaginationNext />
          <PaginationLast />
        </PaginationList>
      </Pagination>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { getArticleList } from '@/api/modules/content'
import { type Content } from '@/api/interface/index'
import LazyImage from '@/components/LazyImage/LazyImage.vue'
import {
  Pagination,
  PaginationEllipsis,
  PaginationFirst,
  PaginationLast,
  PaginationList,
  PaginationListItem,
  PaginationNext,
  PaginationPrev,
} from '@/components/ui/pagination'

const route = useRoute()
const router = useRouter()
const id = route.params.id as string
const articleList = ref<Content.ResArticle[]>()
const categoryName = ref('')
const currentPage = ref(1)
const pageSize = ref(9)
const total = ref(0)

const formatDate = (dateStr: string) => {
  const date = new Date(dateStr)
  return date.toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: 'long',
    day: 'numeric',
  })
}

function handleArticleClick(article: Content.ResArticle) {
  router.push({
    name: 'detail',
    params: {
      id: article.id,
    },
  })
}

const handlePageChange = (page: number) => {
  currentPage.value = page
  init()
}

async function init() {
  const params = {
    categoryId: id,
    pageNum: currentPage.value,
    pageSize: pageSize.value,
  }
  try {
    const res = await getArticleList(params)
    console.log('res', res)
    articleList.value = res.data.list
    total.value = res.data.total
    if (res.data.list.length > 0) {
      categoryName.value = res.data.list[0].categoryName
    }
  } catch (error) {
    console.error('获取文章列表失败:', error)
  }
}

onMounted(() => {
  init()
})
</script>
